<template>
  <div class="my">
    <!-- 头部信息区域 -->
    <div class="main">
      <div class="top">
        <div class="imgBox">
          <img
            src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=8ef31ebb22d68dc39fb785bc9ad5bdaa&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fb219ebc4b74543a95632edd416178a82b90114f8.jpg"
            alt="" @click="$router.push('/info')"
          />
          <span>{{ userInfo.name }}</span>
          <div class="collect">
            <template>
              <van-icon left-icon name="vip-card-o" class="fei" />
              <div class="yued">今日阅读</div>
              <div>{{ userInfo.like_count }}</div>
            </template>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="item">
          <div>{{ userInfo.art_count }}</div>
          <div>动态</div>
        </div>
        <div class="item">
          <div>{{ userInfo.follow_count }}</div>
          <div>关注</div>
        </div>
        <div class="item">
          <div>{{ userInfo.fans_count }}</div>
          <div>粉丝</div>
        </div>
      </div>
    </div>
    <!-- 收藏区域 -->
    <div class="shouc">
      <van-grid :column-num="3">
        <van-grid-item>
          <template
            ><van-icon name="star-o" size="30" color="#ff5353" />
            <div class="tub" @click="$router.push('/shouc')">收藏</div>
          </template>
        </van-grid-item>
        <van-grid-item>
          <template
            ><van-icon
              name="underway-o"
              size="30"
              color="#ffa024"
              text="历史"
            />
            <div class="tub">历史</div>
          </template>
        </van-grid-item>

        <van-grid-item
          ><template
            ><van-icon name="records" size="30" color="#1989fa" text="作品" />
            <div class="tub">作品</div>
          </template></van-grid-item
        >
      </van-grid>
    </div>
    <!-- 消息通知区域 -->
    <div class="news">
      <van-cell-group>
        <van-cell title="消息通知" size="large" is-link />
        <van-cell title="用户反馈" size="large" is-link />
        <van-cell @click="$router.push('/zhi')" title="小智同学" size="large" is-link />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { getLocal } from '../../../utils/local' // 判断有没有token
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    ...mapActions(['setUserInfo'])
  },
  created () {
    // 打开页面时,判断用户是否登录(判断有没有token,没有就提示登录)
    const loginInfo = getLocal('token')
    if (!loginInfo || !loginInfo.token) {
      // 提示未登录,跳转到登录页,终止
      this.$toast('你还未登录')
      this.$router.push('/login')
      return
    }
    // 应该得到用户信息
    this.setUserInfo()
  }
}
</script>

<style lang="less" scoped>
.my {
  background-color: #f5f7f9;
  .main {
    box-sizing: border-box;
    position: relative;
    // width: 100%;
    height: 200px;
    background-color: #3e9df8;
    color: #fff;
    padding: 20px;
    .top {
      .imgBox {
        display: flex;
        align-items: center;

        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 15px;
        }
      }
      .collect {
        position: absolute;
        right: 0px;
        top: 0px;
        font-size: 10px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 30px 0 0 30px;
        padding: 8px;
        text-align: center;
        transform: translateY(50%);
        .yued {
          margin-bottom: 5px;
        }
      }
    }
    .bottom {
      display: flex;
      margin-top: 40px;
      .item {
        flex: 1;
        text-align: center;
      }
    }
  }
  .news {
    margin-top: 15px;
  }
  .shouc {
    font-size: 16px;
  }
  .tub {
    margin-top: 8px;
  }
  .fei {
    color: pink;
  }
}
</style>
